<template>
	<div class="full-screen-bg">
		<div class="form-container">
			<h2 class="HighTitle">健康档案管理系统</h2>
			<h3 class="EnrollText">账号注册</h3>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" type="password" placeholder="请输入密码" show-password></el-input>
				</el-form-item>
				<el-form-item label="真实姓名" prop="name">
					<el-input v-model="form.name" placeholder="请输入真实姓名"></el-input>
				</el-form-item>

				<el-form-item label="角色" prop="usertype">
					<el-radio-group v-model="form.usertype" @change="onRoleChange">
						<el-radio label="doctor">医生</el-radio>
						<el-radio label="patient">患者</el-radio>
					</el-radio-group>
				</el-form-item>

				<!-- 只有当选择病人时才需要填写患者信息 -->
				<el-form-item v-if="form.usertype === 'patient'" label='身份证号' prop="patientId">
					<el-input v-model="patientInfo.patientId" placeholder="身份证号"></el-input>
				</el-form-item>
				<el-form-item v-if="form.usertype === 'patient'" label='性别' prop="gender">
					<el-select v-model="patientInfo.gender" placeholder="请选择" style="width: 100%">
						<el-option label="男" value="1"></el-option>
						<el-option label="女" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="form.usertype === 'patient'" label='生日' prop="birthDate">
					<el-date-picker v-model="patientInfo.birthDate" type="date" placeholder="选择日期"></el-date-picker>
				</el-form-item>
				<el-form-item v-if="form.usertype === 'patient'" label='患者联系方式' prop="patient">
					<el-input v-model="patientInfo.phone" placeholder="本人电话号码"></el-input>
					<el-input v-model="patientInfo.address" placeholder="常住地址"></el-input>
				</el-form-item>
				<el-form-item v-if="form.usertype === 'patient'" label='紧急联系人' prop="emergency">
					<el-input v-model="patientInfo.emergencyContact" placeholder="紧急联系人姓名"></el-input>
					<el-input v-model="patientInfo.emergencyPhone" placeholder="紧急联系人联系方式"></el-input>
				</el-form-item>

				<!-- 只有当选择医生时才显示医院选择 -->
				<el-form-item v-if="form.usertype === 'doctor'" label="所属医院" prop="hospitalId">
					<el-select v-model="form.hospitalId" placeholder="请选择医院" style="width: 100%" @focus="getHospital"
						v-loading="isHospitalOk">
						<el-option v-for="item in hospitalList" :key="item.id" :label="item.hospitalName"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<!-- 只有当选择医生时才显示科室选择 -->
				<el-form-item v-if="form.usertype === 'doctor'" label="所属科室" prop="deptId">
					<el-select v-model="form.deptId" placeholder="请选择科室" style="width: 100%" @focus="getDept"
						v-loading="isDeptOk">
						<el-option v-for="item in deptList" :key="item.deptCode" :label="item.deptName"
							:value="item.deptCode">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button @click="returnLogin">返回登录</el-button>
					<el-button type="primary" @click="onSubmit">立即注册</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import http from '../utils/request'
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					name: '',
					usertype: '',
					hospitalId: '',
					deptId: ''
				},
				patientInfo: {
					patientId: '', // 身份证号
					name: '',
					namePhonetic: '', // 姓名拼音
					gender: '', //1-男，2-女
					birthDate: '',
					phone:'',
					address:'',
					emergencyContact: '',
					emergencyPhone: '',
					userId: ''
				},
				hospitalList: [],
				deptList: [],
				isHospitalOk: false,
				isDeptOk: false,
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 20,
							message: '用户名长度在 3 到 20 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '密码长度在 6 到 20 个字符',
							trigger: 'blur'
						}
					],
					name: [{
						required: true,
						message: '请输入真实姓名',
						trigger: 'blur'
					}],
					usertype: [{
						required: true,
						message: '请选择角色',
						trigger: 'change'
					}],
					hospitalId: [{
						required: true,
						message: '请选择所属医院',
						trigger: 'change'
					}]
				}
			}
		},
		methods: {
			onRoleChange(value) {
				console.log('选择的角色:', value);
				// 如果从医生切换到患者，清空医院选择
				if (value === 'patient') {
					this.form.hospitalId = '';
				}
			},
			async getHospital() {
				this.isHospitalOk = true;
				const response = await http.get('/enroll/getHospitalList');
				setTimeout(() => {
					this.isHospitalOk = false;
					this.hospitalList = response.data.data;
				}, 1000);

			},
			async getDept() {
				this.isDeptOk = true;
				const response = await http.get('/enroll/getDeptList');
				setTimeout(() => {
					this.isDeptOk = false;
					this.deptList = response.data.data;
				}, 1000);
			},
			returnLogin() {
				this.$route.push('/login')
			},
			async onSubmit() {
				if (!this.form.username || !this.form.password || !this.form.name || !this.form.usertype) {
					console.log(form);
					this.$message.error('请填写必填项');
					return;
				}
				// 构建提交数据
				const submitData = {
					username: this.form.username,
					password: this.form.password,
					name: this.form.name,
					usertype: this.form.usertype,
					hospitalId: null,
					deptCode: null
				};

				// 如果是医生，添加医院ID和部门ID
				if (this.form.usertype === 'doctor') {


					submitData.hospitalId = this.form.hospitalId;
					submitData.deptCode = this.form.deptId;

				} 



				console.log('提交数据:', submitData);

				const response = await http.post('/enroll', submitData);

				console.log(response);
				if (response.data.code === 0) {
					this.$message.error(response.data.msg)
					return;
				}
				
				if (this.form.usertype === 'patient') {
					// patientInfo: {
					// 	name: '',
					// 	namePhonetic: '', // 姓名拼音
					// },
					this.patientInfo.name = this.form.name;
					this.patientInfo.namePhonetic = this.form.username;
					console.log('发送数据：',this.patientInfo);
					const resp = await http.post('/enroll/patMaster', this.patientInfo);
					
					console.log(resp);
					if (resp.data.code === 0) {
						this.$message.error(resp.data.msg)
						return;
					}
				}

				this.$message("创建成功")
				returnLogin();


			},

			returnLogin() {
				this.$router.push('/login');
			}
		},

		// 也可以使用 watch 来监听角色变化
		watch: {
			'form.usertype': function(newVal) {
				if (newVal === 'patient') {
					this.form.hospitalId = '';
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	// 定义变量
	@container-width: 27.5rem;
	@container-padding: 30px;
	@shadow-color: rgba(0, 0, 0, 0.1);
	@title-color: #24729c;
	@border-radius: 8px;
	@transition-time: 0.3s;

	// 背景样式
	.full-screen-bg {
		background-color: #FFF;
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.form-container {
		width: @container-width;
		background: white;
		border-radius: @border-radius;
		box-shadow: 0 4px 20px @shadow-color;
		padding: @container-padding;
		transition: all @transition-time ease;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.form-container:hover {
		box-shadow: 0 8px 30px darken(@shadow-color, 50%);
		transform: translate(-50%, -50%) scale(1.02);
	}

	// 标题样式
	.HighTitle {
		line-height: 3.125rem;
		text-align: center;
		font-size: 2rem;
		font-weight: 700;
		color: @title-color;
		letter-spacing: 1px;
		text-transform: uppercase;
		margin: 1.5rem 0;
		border-radius: @border-radius;
	}

	.EnrollText {
		line-height: 2rem;
		text-align: center;
		font-size: 1.2rem;
		font-weight: 650;
		color: #007799;
		letter-spacing: 10px;
		font-family: fangsong;
		margin: 1.5rem 0;
		padding: 0.8rem 1.5rem;
		border-radius: @border-radius;
	}
</style>